<template>
  <div class="navbar">

    <div class="content-main">
      
      <ul style="display: inline-block;">
        <li class="subfield" style="display: inline-block;" v-for="(route, index) in routerList" :key="route.path">
        <router-link :to="route.path"  class="link-style">
          {{ route.name }}
        </router-link>
      </li>
      </ul>
      
      <div class="logo"  style="display: inline-block;"> 
        <img src="../assets/logo.png" class="logo-img" />
      </div>
      
      <div class="query" @click="handleClick" style="display: inline-block;"> 
        <img src="./query.png" class="query-img" />
      </div>
      
      <div class="user" style="display: inline-block;">
        <a href="register">
        <el-button type="warning" class="custom-button" true>注册</el-button>
        </a>
        <a href="login">
        <el-button type="warning" class="custom-button" true>登录</el-button>
        </a>
      </div>
    
    </div>
    
    <!-- <div class="content">
      <router-view @send-data="handleData"></router-view>
    </div> -->
  
    <div class="content">
      <router-view @send-data="handleData" :shareData="shareData" ></router-view>
    </div>

  </div>  
</template>

<script>
import { reactive, provide } from 'vue';
import query_people from '../views/query/query_people.vue';
import res from '../views/query/res.vue'
export default {
  components: {
    res,
  },
  data() {
    return {
      routerList: [
        {
          path: "/",
          name: "首页",
        },
        {
          path: "/QA",
          name: "智能问答",
        },
        {
          path: "/Feedback",
          name: "反馈界面",
        },
        // {
        //   path: "/overview",
        //   name: "非遗概览",
        // },
        {
          path: "/community",
          name: "交流社区",
        },
        {
          path: "/E_Shopping_Mall",
          name: "非遗商城",
        },
        {
          path: "/test",
          name: "答题界面",
        },
      ],
      shareData:null
    };
  },
  methods: {
    openLinkInNewTab(url) {
      window.open(url, '_blank').focus();
    },
    handleClick() {
      // 点击后跳转到 '/other' 路由
      this.$router.push('/query');
    },
    handleData(data) {
      console.log("parent:", data);
      this.shareData = data;
    }
  }
};
</script>

<style scoped>
.navbar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.content-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: rgba(168, 140, 75, 0.6);
  width: 100%;
  padding: 1rem;
}
.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 3vw;
  width: 8vh;
  height: 8vh;
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.nav-links {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.subfield {
  margin: 0 1rem;
}

.link-style {
  font-size: 1.2vw;
  color: rgb(68, 71, 35);
  text-decoration: none;
}

.link-style:hover {
  color: black;
  text-decoration: underline;
}

.query {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 32vw;
}

.query-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

.user {
  display: flex;
  align-items: center;
  margin-left: 1vw;
}

.custom-button {
  margin-left: 1vw;
  width: 4vw;
  height:6vh;
  border-radius: 2vh;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
  width: 100%;
  overflow: hidden;
}
</style>